/* .item{
  width: 200px;
  border: 1px solid pink;
}
.container{
  width: 500px;
  height: 700px;
  border: 1px solid pink;
} */


.container {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
  position: relative; /* 容器需设为相对定位，使内部元素绝对定位生效 */
  margin: 20px auto;
}

.items {
  background: #f0f0f0;
  border: 1px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  padding: 10px;
  color: #333;
}

/* 父容器：作为拖动范围边界 */
.parentContainer {
  width: 600px;
  height: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 2px solid #333;
  position: relative; /* 关键：子元素的定位基准 */
  background: #f5f5f5;
}

/* 列表容器：用于容纳所有可拖动项 */
.listContainer {
  width: 100%;
  height: calc(100% - 40px); /* 减去标题高度 */
}

/* 可拖动的列表项样式 */
.draggableItem {
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #4285f4;
  color: white;
  border-radius: 8px;
  margin: 10px 0;
  cursor: move; /* 鼠标悬停显示拖动图标 */
  user-select: none; /* 禁止文本选中 */
}